<template>
  <!-- 第三方报告 -->
  <h-modal-dark class="modal-dark" v-model.lazy="show" title="新增第三方报告">
    <a-form-model class="dark-form" ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="24">
          <a-form-model-item label="报告方" prop="reportParty">
            <a-input v-model.lazy="form.reportParty" :maxLength="50" placeholder="报告方"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="上传文件" >
            <!-- <UploadImage type="drag" ref="image" @change="getImg" /> -->
            <UploadImageMutil type="drag" ref="image" :length="100" @getUrl="getImg" />
          </a-form-model-item>

        </a-col>

      </a-row>
      <div class="dark-modal-footer">
        <a-button type="default" @click="submit">确 认</a-button>
      </div>
    </a-form-model>
  </h-modal-dark>
</template>

<script>
import moment from 'moment';
import { deptList } from '@/api/dept';
import { addMbThirdReport } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';
import UploadImage from '../../../components/UploadImage/index';
import { v4 } from 'uuid';
import UploadImageMutil from '@/components/UploadImageMutil';

const defaultForm = {
  reportParty: '',
  enclosure: ''
};

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    eventId: {
      type: String,
      default: ''
    }
  },
  components: {
    UploadImage,
    UploadImageMutil
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    dept(val) {
      this.form.departIdList = val.join(',');
    }
  },
  data() {
    return {
      moment,
      type: 'add',
      show: false,
      deptArr: [],
      dept: [],
      form: cloneDeep(defaultForm),
      rules: {
        content: [{ required: true, message: '请输入' }],
        reportParty: [{ required: true, message: '请输入' }],
        type: [{ required: true, message: '请输入' }],
        weightType: [{ required: true, message: '请输入' }],
        company: [{ required: true, message: '请输入' }]
      }
    };
  },
  created() {
    deptList({
      pageNo: 1,
      pageSize: 1000
    }).then(res => {
      this.deptArr = res.data.records.map(e => {
        return {
          label: e.depart,
          value: e.id
        };
      });
    });
  },
  methods: {
    edit(form) {
      this.type = 'edit';
      this.form = form;
      const file = form.file;
      // console.log(file)
      if (file) {
        this.$nextTick(() => {
          console.log(this.$refs.image);
          this.$refs.image.setURL(file.split(',').map(e => {
            return {
              url: e,
              name: e,
              uid: v4(),
              status: 'done',
              response: {
                data: {
                  imgUrl: e,
                  name: e
                }
              }
            };
          }));
        });
      }
    },
    add() {
      this.type = 'add';
      this.form = cloneDeep(defaultForm);
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            this.form.eventId = this.eventId;
            addMbThirdReport(this.form).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
          } else if (this.type == 'edit') {
          //   editMbThirdReport(this.form).then(res => {
          //   this.$message.success('修改成功');
          //   this.show = false;
          //   this.$emit('submit', cloneDeep(this.form));
          //   this.form = cloneDeep(defaultForm);
          // });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getImg(img) {
      // console.log(img, 'imgggg');
      // const file = img.map(e => e.imgUrl).join(',');
      this.form.enclosure = img;
    }
  }
};
</script>

<style lang="less">
  .dark-modal-footer {
    position: absolute;
    bottom: 80px;
    text-align: center;
    width: 89%;
    .ant-btn {
      background: none;
      border: 1px solid rgb(72,197,240);
      color: #fff;
    }
  }
</style>
